<!DOCTYPE html>
<html ng-app="app">
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<link rel="stylesheet" href="css/base.css">
	<link rel="stylesheet" href="css/public.css">
	<link rel="stylesheet" href="css/find.css">
	<script src="js/jquery-1.7.2.min.js"></script>
	<script src="js/angular-1.5.6.js"></script>
	<script src="js/findRendering.js"></script>
	<title>发现频道</title>
</head>
<body id="bodyBox" style="overflow-x:hidden">
	<header id="head">
		<div class="categoryBj">
			<div class="goBack">
				<a href="index.html"><span>返回上一页</span></a>
			</div>
			<div class="headTitle">发现频道</div>
			<div class="rightInfo">
				<a href="javascript:;" class="openMenu"><span></span></a>
			</div>
		</div>
		<ul class="menu">
			<li><a href="index.html"><span class="toIndex"></span><strong>首页</strong></a></li>
			<li><a href="category.html"><span class="sortSearch"></span><strong>分类搜索</strong></a></li>
			<li><a href="shoppingcar.html"><span class="shopCar"></span><strong>购物车</strong></a></li>
			<li><a href="my.html"><span class="myHome"></span><strong>我的某东</strong></a></li>
		</ul>
	</header>
	<section class="findContent">
		<ul class="findUl clear-fix">
		    <li class="findLi"><p class="active">精选</p></li>
		    <li class="findLi"><p>风尚</p></li>
		    <li class="findLi"><p>数码</p></li>
		   	<li class="findLi"><p>美食</p></li>
		   	<li class="findLi noBorder"><p>生活</p></li>
		</ul>
		<ol class="active" ng-controller="selectedshow">
			<li class="findContentInfo clear-fix" ng-repeat="v in listjson" ng-cloak>
				<div class="findLeftInfo">
					<p class="infoHead">{{v.head}}</p>
					<p class="infoText">{{v.content}}</p>
					<div class="leftInfo-icon"><img ng-src="{{v.src}}" alt=""><span>{{v.other}}</span></div>
				</div>
				<div class="findRightInfo">
					<div class="imgBox">
						<img ng-src="{{v.rightimg}}" alt="">
					</div>
					<div class="RightBottom clear-fix">
						<div class="rightInfoTime fl">
							<img ng-src="{{v.dateimg}}" alt="">
							<span>{{v.date}}</span>
						</div>
						<div class="rightInfoLook fr">
							<img ng-src="{{v.lookimg}}" alt="">
							<span>{{v.look}}</span>
						</div>
					</div>
				</div>
			</li>
		</ol>
		<ol ng-controller="fashionshow">
			<li class="findContentInfo clear-fix" ng-repeat="v in listjson" ng-cloak>
				<div class="findLeftInfo">
					<p class="infoHead">{{v.head}}</p>
					<p class="infoText">{{v.content}}</p>
					<div class="leftInfo-icon"><img ng-src="{{v.src}}" alt=""><span>{{v.other}}</span></div>
				</div>
				<div class="findRightInfo">
					<div class="imgBox">
						<img ng-src="{{v.rightimg}}" alt="">
					</div>
					<div class="RightBottom clear-fix">
						<div class="rightInfoTime fl">
							<img ng-src="{{v.dateimg}}" alt="">
							<span>{{v.date}}</span>
						</div>
						<div class="rightInfoLook fr">
							<img ng-src="{{v.lookimg}}" alt="">
							<span>{{v.look}}</span>
						</div>
					</div>
				</div>
			</li>
		</ol>
		<ol ng-controller="digitalshow">
			<li class="findContentInfo clear-fix" ng-repeat="v in listjson" ng-cloak>
				<div class="findLeftInfo">
					<p class="infoHead">{{v.head}}</p>
					<p class="infoText">{{v.content}}</p>
					<div class="leftInfo-icon"><img ng-src="{{v.src}}" alt=""><span>{{v.other}}</span></div>
				</div>
				<div class="findRightInfo">
					<div class="imgBox">
						<img ng-src="{{v.rightimg}}" alt="">
					</div>
					<div class="RightBottom clear-fix">
						<div class="rightInfoTime fl">
							<img ng-src="{{v.dateimg}}" alt="">
							<span>{{v.date}}</span>
						</div>
						<div class="rightInfoLook fr">
							<img ng-src="{{v.lookimg}}" alt="">
							<span>{{v.look}}</span>
						</div>
					</div>
				</div>
			</li>
		</ol>
		<ol ng-controller="deliciousshow">
			<li class="findContentInfo clear-fix" ng-repeat="v in listjson" ng-cloak>
				<div class="findLeftInfo">
					<p class="infoHead">{{v.head}}</p>
					<p class="infoText">{{v.content}}</p>
					<div class="leftInfo-icon"><img ng-src="{{v.src}}" alt=""><span>{{v.other}}</span></div>
				</div>
				<div class="findRightInfo">
					<div class="imgBox">
						<img ng-src="{{v.rightimg}}" alt="">
					</div>
					<div class="RightBottom clear-fix">
						<div class="rightInfoTime fl">
							<img ng-src="{{v.dateimg}}" alt="">
							<span>{{v.date}}</span>
						</div>
						<div class="rightInfoLook fr">
							<img ng-src="{{v.lookimg}}" alt="">
							<span>{{v.look}}</span>
						</div>
					</div>
				</div>
			</li>
		</ol>
		<ol ng-controller="lifeshow">
			<li class="findContentInfo clear-fix" ng-repeat="v in listjson" ng-cloak>
				<div class="findLeftInfo">
					<p class="infoHead">{{v.head}}</p>
					<p class="infoText">{{v.content}}</p>
					<div class="leftInfo-icon"><img ng-src="{{v.src}}" alt=""><span>{{v.other}}</span></div>
				</div>
				<div class="findRightInfo">
					<div class="imgBox">
						<img ng-src="{{v.rightimg}}" alt="">
					</div>
					<div class="RightBottom clear-fix">
						<div class="rightInfoTime fl">
							<img ng-src="{{v.dateimg}}" alt="">
							<span>{{v.date}}</span>
						</div>
						<div class="rightInfoLook fr">
							<img ng-src="{{v.lookimg}}" alt="">
							<span>{{v.look}}</span>
						</div>
					</div>
				</div>
			</li>
		</ol>
	</section>
	<script>
		/*显示隐藏*/
		$('.openMenu').toggle(function(){
			$('.menu').slideDown();
		},function(){
			$('.menu').slideUp();
		})
		
		/*头部左右滑动效果*/
		$('.findUl').on('touchstart',function(ev){//鼠标按下
			var l=0;
			var disX=ev.originalEvent.changedTouches[0].pageX-$('.findUl').offset().left;
			$('.findUl').on('touchmove',function(ev){
				l=ev.originalEvent.changedTouches[0].pageX-disX;
				$('.findUl').css('left',l);	
				$('.findUl').preventDefault();
			})
			$('.findUl').on('touchend',function(){
				if(l>20 || l<-100){
					$('.findUl').stop().animate({'left':0},800);
				}
			})
		})
		
		/*选项卡*/
		$('.findLi').click(function(){
			var _this = $(this).index();
			$('.findLi').find('p').removeClass('active');
			$(this).find('p').addClass('active');
			
			$('.findContent ol').removeClass('active');
			$('.findContent ol').eq(_this).addClass('active');
		})
	</script>
</body>
</html>